<!--升级公告-->
<template>
  <div class="viewBox">
    <div class="view_title">
      <div class="text-16px">升级公告</div>
      <div
        class="flex items-center cursor-pointer"
        @click="gotoPage('/system/upgradeNotice')"
      >
        <el-button link type="primary"> 全部 </el-button>
        <img class="w-15px h-15px ml-2px" src="@/assets/images/00.png" alt="" />
      </div>
    </div>
    <div class="viewsCnt p-20px">
      <el-collapse accordion>
        <el-collapse-item
          v-for="(item, index) in noticeList"
          :title="item.noticeTitle"
          :name="index"
        >
          <div v-html="item.noticeContent" class="mb-20px"></div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup name="Upgrade">
import { listNotice } from '@/api/system/upgradeNotice'
const router = useRouter()
const { proxy } = getCurrentInstance()
const loading = ref(false)
const data = reactive({
  noticeList: []
})

const { noticeList } = toRefs(data)

onMounted(() => {
  init()
})
async function init() {
  loading.value = true
  await getList()
}
// 请求接口
function getList() {
  loading.value = true
  listNotice({
    pageNum: 1,
    pageSize: 5
  })
    .then(response => {
      noticeList.value = response.rows
    })
    .finally(() => {
      loading.value = false
    })
}

init()
function gotoPage(path, query) {
  router.push({
    path,
    query
  })
}
</script>

<style scoped lang="scss">
.viewBox {
  // height: 420px;
  margin-bottom: 20px;
  :deep(.el-table) {
    margin: 0 !important;
  }
  .view_title {
    background-color: rgba(249, 249, 249, 1);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(223, 220, 220, 0.8);
    border-bottom: none;
    font-family: '微软雅黑 Bold';
    font-weight: 600;
    // box-shadow: 0px 1px 3px 1px rgb(201, 197, 197);
  }
}
.viewsCnt {
  border: 1px solid rgba(223, 220, 220, 0.8);
  margin-bottom: 20px;
}
</style>
